<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">	<head>
		<meta charset="utf-8">
		<title>抽大钞</title>
		<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/layui.css}" />
		<script type="text/jscript" th:src="@{/plugin/layui/layui.js}" charset="UTF-8"></script>
	    <script th:src="@{/plugin/vue/axios.js}" type="text/javascript" charset="utf-8"></script>
	    <script th:src="@{/plugin/vue/vue.js}" type="text/javascript" charset="utf-8"></script>
	<!--<script th:src="@{/plugin/vue/clickoutside.js}" type="text/javascript" charset="utf-8"></script>-->
	<script th:src="@{/plugin/jquery.min.js}" charset="utf-8"></script>

</head>
	<body>
		<!--最外层容器控制位置-->
		<div id="app" class="container" style="height:500px; margin: 30px 100px;">
			<div id="" class="layui-row ">
				<!--  左边操作功能模块-->
				<div id="" class="layui-col-md12 layui-bg-gray" style="height: 500px;">
					<div id="" class="layui-row ">
						<!-- 左侧菜单框-->
						<div id="" class="layui-col-md8 " style=" height: 500px;">
							<!-- 印刷号 -->
							<!-- <div id="" class="layui-col-md12" style="border:#40AFFE 2px solid ; background-color: white; height: 70px;">
								<div id="" class="layui-col-md5" style="height: 70px; text-align: center;line-height: 70px; font-size: 20px;color: red;">
									印&nbsp;刷&nbsp;号：<input type="text" size="10" ; style="color: red;" />
								</div>

								<div id="" class="layui-col-md2 layui-bg-blue" style="height: 70px; text-align: center;line-height: 70px;font-size: 20px;">
									读取腕带
								</div>

								<div id="" class="layui-col-md5" style="height: 70px; text-align: center;line-height: 70px;font-size: 20px;">
									腕带类型：
									<select>
										<option>普通腕带</option>
										<option>vip腕带</option>
									</select>
								</div>
							</div>
							 <div id="" class="layui-col-md12" style="border:#40AFFE 2px solid ; margin-top:5px;background-color:white; height: 70px;">
								<div id="" class="layui-col-md5" style="height: 70px; text-align: center;line-height: 70px; font-size: 20px;">
									电话号码：<input type="text" size="10" ;/>
								</div>
								<div id="" class="layui-col-md7" style="height: 70px; text-align: center;line-height: 70px;font-size: 20px;">
									证&nbsp;件&nbsp;号：<input type="text" size="20" ; style="color: red;" />
								</div>
							</div> -->
							<!-- 消费项目列表 -->
							<div id="" class="layui-col-md12" style="margin-top: 5px; background-color: #93D1FF;font-size: 20px; height: 30px;">
								&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-list" style="font-size: 20px;" ></i>抽大钞列表
							</div>
							<div id="" class="layui-col-md12" style="overflow-y:auto;">
								<table border="1px" bordercolor="#f2f2f2" width="100%" >
									<tr bgcolor="#007DDB">
										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">终端编号</td>
										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">金额</td>
										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">现金去向</td>
										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">操作时间</td>
									</tr>
									<tr v-for="item in listExtract">
										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">{{item.pos.pos_name}}</td>
										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">{{item.extractMoneyAmount}}</td>
										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">{{item.imprestSourceInfo.imprestSourceNameFore}}</td>
										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">{{item.extractMoneyTime}}</td>
									</tr>
<!--									<tr >-->
<!--										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">售票充值点1</td>-->
<!--										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">3000</td>-->
<!--										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">售票充值点2</td>-->
<!--										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">2019-12-11 12:32:33</td>-->
<!--									</tr>-->
								</table>
							</div>
						</div>

						<!-- 右侧菜单-->
						<div id="" class="layui-col-md4" style="height: 500px; ">
							<div id="" class="layui-col-md12" style="background-color: #93D1FF; height: 140px; text-align: center;margin: 5px;">
									<div id="" style="font-size: 20px;margin-top: 15px;">
										终端编号：<input type="text" v-model="listExtract[0].pos.pos_name" value="" size="10"/>
									</div>
									<div id="" style="font-size: 20px; margin-top: 20px;">
										回收金额：<input type="text" v-model="extractMoneyInfo['extractMoneyAmount']"  value="" size="10">
									</div>
									<div id="" style="font-size: 20px;margin-top: 15px;">
										<!--此处应该是一个select-->
										现金去向：<select v-model="select['imprestSourceId']">
											<option v-for="select in listPosInfo" :value="select['imprestSourceId']">{{select.imprestSourceNameFore}}</option>
										</select>
										<!--现金去向：<input type="text" value="金库" size="10"/>(元)-->
									</div>
							</div>
							<div id="" class="layui-col-md12 layui-col-space5" style="margin: 5px;">
									<div id="" class="layui-col-md4" @click="addNum(500)">
										<div id="" style="text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">500元</font>
										</div>
									</div>
									<div id="" class="layui-col-md4" @click="addNum(100)">
										<div id="" style="text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">100元</font>
										</div>
									</div>
									<div id="" class="layui-col-md4" @click="addNum(200)">
										<div id="" style="text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">200元</font>
										</div>
									</div>
									<div id="" class="layui-col-md4" @click="addNum(7)">
										<div id="" style="font-size: 25px; text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">7</font>
										</div>
									</div>
									<div id="" class="layui-col-md4" @click="addNum(8)">
										<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">8</font>
										</div>
									</div>
									<div id="" class="layui-col-md4" @click="addNum(9)">
										<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">9</font>
										</div>
									</div>
									<div id="" class="layui-col-md4" @click="addNum(4)">
										<div id="" style="font-size: 25px; text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">4</font>
										</div>
									</div>
									<div id="" class="layui-col-md4" @click="addNum(5)">
										<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">5</font>
										</div>
									</div>
									<div id="" class="layui-col-md4" @click="addNum(6)">
										<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">6</font>
										</div>
									</div>
									<div id="" class="numberbtn layui-col-md4" @click="addNum(1)">
										<div id="" style="font-size: 25px; text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">1</font>
										</div>
									</div>
									<div id="" class="numberbtn layui-col-md4" @click="addNum(2)">
										<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">2</font>
										</div>
									</div>
									<div id="" class="numberbtn layui-col-md4" @click="addNum(3)">
										<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">3</font>
										</div>
									</div>
								<div id="" class="layui-col-md4" @click="addNum(-1)">
									<div id="" style="font-size: 25px; text-align: center;line-height: 50px; background-color: #01AAED;height: 50px;">
										<font color="white">退格</font>
									</div>
								</div>
								<div id="" class="layui-col-md4" @click="addNum(0)">
									<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
										<font color="white">0</font>
									</div>
								</div>
								<div id="" class="layui-col-md4" @click="addNum(10)">
									<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: orange;height: 50px;">
										<font color="white">重置</font>
									</div>
								</div>
								<div id="" class="layui-col-md6" >
									<div @click="insertInfo"  style="font-size: 25px; text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
										<font color="white">确定</font>
									</div>
								</div>
								<div id="" class="layui-col-md6 " >
									<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #FF0000;height: 50px;">
										<font color="white">关闭</font>
									</div>
								</div>
								</table>
							</div>
						</div>


					</div>
				</div>
			<!-- 页脚-->
				<div class="layui-row layui-bg-gray" style="text-align: center;">
					<div id="mytime" class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> </div>
					<div class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> 操作用户：yanhui</div>
					<div id="mytime2" class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> </div>
					<div class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> 某某游乐园</div>
				</div>
		</div>
		</div>
	<script>
		// 时间展示
		function showTime() {
			var	nowtime = new Date();
			var	year = nowtime.getFullYear();
			var	month = nowtime.getMonth() + 1;
			var	date = nowtime.getDate();
			$("#mytime").html(year + "年" + month + "月" + date +"日");
			$("#mytime2").html(""+nowtime.toLocaleTimeString());
			$("#mytime3").val(year + "-" + month + "-" + date +" " +nowtime.toLocaleTimeString());

		};
		// jQuery加载执行时间展示
		$(function(){
			setInterval("showTime()", 1000);
		})
		var app = new Vue({
			el:"#app",
			data:{
				listExtract:[],
				extractMoneyInfo:{
					extractMoneyId: 0,
					extractMoneyAmount: 0.00,
					extractMoneyTime: "",
					extractMoneyDirFore: 0,
					extractMoneyBarNumberFore: 0,
				},
				select:{},
				listSelect:[],
				num:"",
				oldNum:[],
				countN:-1,
				newNum:[],
			},
			//vue生命周期函数（mounted/create）,实现加载时运行
			mounted:function(){
				this.listAll();
				this.listPos();
			},
			methods:{
				addNum:function(n){
					/*
                    *   -1   0  1
                    *   null 7  8
                    *        ^
                    *
                    *   借助C语言指针思想：
                    *      当拥有 第一个数据（eg:7）时，指针右移一位（+1，变为0），指向7，
                    *      当拥有 第二个数据（eg:8）时，指针右移一位（+1，变为1），指针指向8，
                    * */
					var that = this;
					if(n === 10){
						that.oldNum = this.newNum;
						that.num = "";
						that.extractMoneyInfo.extractMoneyAmount ="";
						that.countN = -1;
						return;
					};
					if(n === -1){ // 参数n=-1：代表退格操作
						if(this.countN>0){ // 若指针指向 1 和其之后数据（例如2，3，4……）
							that.countN = this.countN-1; // 退格，将回到上次指针位置
							//console.log("退格前:"+this.countN)
							that.extractMoneyInfo.extractMoneyAmount = this.oldNum[this.countN];
							//console.log("退格:"+this.countN)
						}else{ // 若指针指向 0 和之前数据（例如-1，-2，-3……），退格，将指向空值状态
							that.oldNum = this.newNum;
							that.num = "";
							that.extractMoneyInfo.extractMoneyAmount ="";
							that.countN = -1;
							//console.log("全清:"+this.countN)
						}
						return
					};
					if(n===500){that.extractMoneyInfo.extractMoneyAmount=n;that.oldNum[this.countN]=this.num;that.countN++;return;};
					if(n===200){that.extractMoneyInfo.extractMoneyAmount=n;that.oldNum[this.countN]=this.num;that.countN++;return;};
					if(n===100){that.extractMoneyInfo.extractMoneyAmount=n;that.oldNum[this.countN]=this.num;that.countN++;return;};
					that.num += n+""; // 生成新数据
					that.countN = this.countN+1; // 当指针右移一步（+1），指向该新数据
					//console.log("生成数据后，添加数组前："+this.countN)
					that.extractMoneyInfo.extractMoneyAmount = Number(this.num); // 让备用金=新数据
					that.oldNum[this.countN] = this.num; // 存入数据数组，方便退格操作
				},
				listPos:function(){
					var that = this;
					axios.get("[[@{/imprestSourceInfo/selectAll}]]")
					.then((resp)=>{
						that.listPosInfo = resp.data.data;
					});
				},
				listAll:function(){
					var that = this;
					axios.get("[[@{/extractMoneyInfo/selectAll}]]")
					.then((resp)=>{
						that.listExtract = resp.data;
					});
				},
				insertInfo:function () {
					const data = new FormData();
					data.append("extractMoneyAmount",this.extractMoneyInfo['extractMoneyAmount']);
					data.append("extractMoneyDirFore",this.select['imprestSourceId']);
					data.append("extractMoneyBarNumberFore",this.listExtract[0].extractMoneyBarNumberFore);
					axios.post("[[@{/extractMoneyInfo/insert}]]",data).then(()=>{
						this.listAll();
					})
				}
			}
		})

	</script>
	</body>
</html>
